<template>
  <div class="wrapper">
    <el-row class="title-tab"> {{ title }}</el-row>
    <el-row v-for="(item, index) in list" :key="index" class="table-col">
      <el-col v-for="(table, index2) in item" :key="index2" :span="24 / item.length" class="table-item">
        <span class="label">{{ table.title }}</span>
        <span class="value">{{ table.value }}</span>
        <span v-show="table.link" @click="goCustomer" class="value stateup">{{ table.link }}></span>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: "个人信息",
  },
  list: {
    type: Array,
    default: [],
  },
  cutName: {
    type: String,
  },
});
// const cutName = ref(props.list[0][1].value);
/**客户档案资料*/
function goCustomer() {
  // let cutName = props.list[0][1].value;
  // router.push({ path: "/customer-record/personal", query: { id: "1" } });
  proxy.$tab.closeOpenPage("/customer-record/personal").then(() => {
    router.push({ path: "/customer-record/personal", query: { id: "1", type: "66", names: props.cutName } });
  });
}
</script>

<style lang="scss" scoped>
.wrapper {
  .title-tab {
    line-height: 44px;
    font-weight: bold;
    font-size: 16px;
    padding-left: 20px;
    background-color: #fafafa;
    border-bottom: solid 1px #eaf2f8;
  }
  width: 100%;
  border: solid 1px #eaf2f8;
  .table-col:not(:last-child) {
    border-bottom: solid 1px #eaf2f8;
  }
  .table-item:not(:last-child) {
    border-right: solid 1px #eaf2f8;
  }
  .table-col {
    height: 100%;
    display: flex;
  }
  .table-item {
    height: 100%;
    display: flex;
    > div {
      display: flex;
    }
    .label {
      //   display: flex;
      border-right: solid 1px #eaf2f8;
      //   align-items: center;
      width: 170px;
      text-align: right;
      //   background: #f2f9fc;
      color: #666;
      padding: 8px 12px;
    }
    .value {
      display: flex;
      align-items: center;
      word-wrap: break-word;
      color: #222;
      font-size: 14px;
      padding: 8px 12px;
      flex: 1;
    }
  }
}
</style>
